<template>
	<view class="order">
		<u-navbar  title="订单详情" :autoBack="true">
		</u-navbar>
		<view class="orderstate" v-if="orderinfo.orderState=='1'">
			<view class="stateimg">
				<image src="../../../static/icons/yiyuyue.png" mode="aspectFit"></image>
			</view>
			<view class="miaoshu">
				已预约
			</view>
		</view>
		<view class="orderstate" v-if="orderinfo.orderState=='3'">
			<view class="stateimg">
				<image src="../../../static/icons/yiwancheng.png" mode="aspectFit"></image>
			</view>
			<view class="miaoshu">
				已完成
			</view>
		</view>
		<view class="orderstate" v-if="orderinfo.orderState=='301'">
			<view class="stateimg">
				<image src="../../../static/icons/yiwancheng.png" mode="aspectFit"></image>
			</view>
			<view class="miaoshu">
				已完成
			</view>
		</view>
		<view class="orderstate" v-if="orderinfo.orderState=='4'">
			<view class="stateimg">
				<image src="../../../static/icons/quxiao.png" mode="aspectFit"></image>
			</view>
			<view class="miaoshu">
				已取消
			</view>

		</view>
		<view class="orderstate" v-if="orderinfo.orderState=='401'">
			<view class="stateimg">
				<image src="../../../static/icons/quxiao.png" mode="aspectFit"></image>
			</view>
			<view class="miaoshu">
				已取消
			</view>


		</view>
		<view class="orderstate" v-if="orderinfo.orderState=='2'">
			<view class="stateimg">
				<image src="../../../static/icons/tingzhen.png" mode="aspectFit"></image>
			</view>
			<view class="miaoshu">
				已停诊
			</view>
		</view>
		<view class="orderstate" v-if="orderinfo.orderState=='5'">
			<view class="stateimg">
				<image src="../../../static/icons/weiyue.png" mode="aspectFit"></image>
			</view>
			<view class="miaoshu">
				已违约
			</view>
		</view>
		<view class="orderstate" v-if="orderinfo.orderState=='101'">
			<view class="stateimg">
				<image src="../../../static/icons/daizhifu.png" mode="aspectFit"></image>
			</view>
			<view class="miaoshu">
				待支付
			</view>
			<view class="" style="text-align: center;font-size: 26rpx;margin: 20rpx auto;">
				<u-count-down :time="time" format="HH:mm:ss" autoStart millisecond @change="onChange"
					@finish="finishdao()">
					<view class="time">
						请在{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}:{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}秒内完成支付
					</view>
				</u-count-down>
			</view>

		</view>
		<view class="orderstate" v-if="orderinfo.orderState=='102'">
			<view class="stateimg">
				<image src="../../../static/icons/daizhifu.png" mode="aspectFit"></image>
			</view>
			<view class="miaoshu">
				待支付
			</view>
			<view class="" style="text-align: center;font-size: 26rpx;margin: 20rpx auto;">
				<u-count-down :time="time" format="HH:mm:ss" autoStart millisecond @change="onChange"
					@finish="finishdao()">
					<view class="time">
						请在{{ timeData.minutes>10?timeData.minutes:'0'+timeData.minutes }}:{{ timeData.seconds>10?timeData.seconds:'0'+timeData.seconds }}秒内完成支付
					</view>
				</u-count-down>
			</view>

		</view>
		<view class="orderstate" v-if="ma.treatCertShowType=='1'">
			<view class="stateimgg">
				<image :src="ma.treatCertValue" mode="aspectFit"></image>
			</view>
			<view class="" style="font-size: 24rpx;line-height: 40rpx; color: #888;text-align: center;">
				{{ma.treatCertDesc?ma.treatCertDesc:""}}
			</view>
			<view class="miaoshu">
				{{ma.treatCertName?ma.treatCertName:""}}
			</view>
		</view>
		<view class="orderstate" v-if="ma.treatCertShowType=='2'">
			<view class="stateimggg">
				<image :src="ma.treatCertValue" mode="aspectFit"></image>
			</view>
			<view class="" style="font-size: 24rpx;line-height: 40rpx; color: #888;text-align: center;">
				{{ma.treatCertDesc?ma.treatCertDesc:""}}
			</view>
			<view class="miaoshu">
				{{ma.treatCertName?ma.treatCertName:""}}
			</view>
		</view>
		<view class="list" v-if="ma.treatCertShowType=='0'">
			<view class="listmain">
				<view class="listitem">
					<view class="itemtop">
						<view class="itemtopl">
							{{ma.treatCertName}}
						</view>
					</view>
					<view class="jiuline">
						{{ma.treatCertValue}}
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="listmain">
				<view class="listitem">
					<view class="itemtop">
						<view class="itemtopl">
							就诊时间
						</view>

					</view>
					<view class="jiuline">
						{{orderinfo.serviceDate?orderinfo.serviceDate:""}} {{orderinfo.weekName?orderinfo.weekName:""}}
						{{orderinfo.sourceTimeShow?orderinfo.sourceTimeShow:""}}
					</view>
					<view class="itemcon">
						<view class="itemconl">
							预约流水号：
						</view>
						<view class="itemconr" style="font-weight: normal;">
							{{orderinfo.ghOrderNo?orderinfo.ghOrderNo:""}}
						</view>
					</view>
					<view class="docinfo">
						<view class="docl" v-if="orderinfo.doctorImage">
							<!-- <image :src="orderinfo.doctorImage" mode="aspectFit"></image> -->
							<u-avatar :src="orderinfo.doctorImage" size="45" shape="circle"></u-avatar>
						</view>
						<view class="docl" v-if="!orderinfo.doctorImage">
							<image src="../../../static/icons/yimo.png" mode="aspectFit"></image>
						</view>
						<view class="docr">
							<view class="docname">
								{{orderinfo.doctorName?orderinfo.doctorName:""}}
								<span>{{orderinfo.doctorTitle?orderinfo.doctorTitle:""}}</span>
							</view>
							<view class="hosname">
								{{orderinfo.hospitalName?orderinfo.hospitalName:""}}
								{{orderinfo.deptName?orderinfo.deptName:""}}
							</view>
						</view>
					</view>

					<view class="itemcon">
						<view class="itemconl">
							就 诊 人：
						</view>
						<view class="itemconr">
							{{orderinfo.name?orderinfo.name:""}}
						</view>
					</view>
					<view class="itemcon">
						<view class="itemconl">
							初 复 诊：
						</view>
						<view class="itemconr">
							初诊
						</view>
					</view>

					<view class="itemcon" v-if="orderinfo.qhMode">
						<view class="itemconl">
							取号方式：
						</view>
						<view class="itemconr">
							{{orderinfo.qhMode?orderinfo.qhMode:"暂无"}}
						</view>
					</view>
					<view class="itemcon" v-if="orderinfo.qhTime">
						<view class="itemconl">
							取号时间：
						</view>
						<view class="itemconr">
							{{orderinfo.qhTime?orderinfo.qhTime:"暂无"}}
						</view>
					</view>
					<view class="itemcon" v-if="orderinfo.treatAddress">
						<view class="itemconl">
							就诊地点：
						</view>
						<view class="itemconr">
							{{orderinfo.treatAddress?orderinfo.treatAddress:"暂无"}}
						</view>
					</view>
					<view class="address">
						<view class="addressmain" @click="godingwei()">
							<view class="addl">
								<view class="hosname">{{orderinfo.hospitalName}}</view>
								<view class="hosad">{{orderinfo.hospitalAddress}}</view>
							</view>
							<view class="addr">
								<view class="" style="margin-left: 5rpx;">
									<u-icon color=" #417ef7" name="map-fill"></u-icon>
								</view>
								<p>导航</p>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="listmain">
				<view class="listitem">

					<view class="itemcon">
						<view class="itemconl">
							诊查费：
						</view>
						<view class="itemconr">
							{{orderinfo.totalFee?orderinfo.totalFee:""}}元
						</view>
					</view>
					<view class="itemcon">
						<view class="itemconl">
							支付方式：
						</view>
						<view class="itemconr">
							{{orderinfo.payMode?orderinfo.payMode:""}}
						</view>
					</view>
					<!-- 	<view class="itemcon" v-if="">
						<view class="itemconl">
							支付方式：
						</view>
						<view class="itemconr">
							已支付
						</view>
					</view> -->
					<view class="itemcon">
						<view class="itemconl">
							支付类型：
						</view>
						<view class="itemconr">
							{{orderinfo.payType?orderinfo.payType:""}}
						</view>
					</view>
					<view class="itemcon" v-if="orderinfo.payState=='3'">
						<view class="itemconl">
							支付状态：
						</view>
						<view class="itemconr">
							已支付
						</view>
					</view>
					<view class="itemcon" v-if="orderinfo.payState=='6'">
						<view class="itemconl">
							支付状态：
						</view>
						<view class="itemconr">
							退款成功
						</view>
					</view>
					<view class="chakan" v-if="orderinfo.medicalTreatGuide" @click="gojiuzhen()">
						查看完整就诊攻略
					</view>

				</view>
			</view>

		</view>
		<!-- 		<view class="wenxin" v-if="orderinfo.reminder">
			<p>重要提示：</p>
			<p v-if="showText"> {{orderinfo.reminder}}</p>
			<p v-if="!showText"> {{orderinfo.reminder.substr(0, 100)}}...</p>
			<view class="" v-if="showText">
				<view v-if="orderinfo.reminder !== null && orderinfo.reminder.length > 100" class="full_text"
					@click="toggleDescription()">收起<u-icon name="arrow-up" color="#4581F6" size="18"></u-icon>
				</view>
			</view>
			<view class="" v-if="!showText">
				<view v-if="orderinfo.reminder !== null && orderinfo.reminder.length > 100" class="full_text"
					@click="toggleDescription()">展开<u-icon name="arrow-down" color="#4581F6" size="18"></u-icon>
				</view>
			</view>
		</view> -->
		<view class="wenxin" v-if="orderinfo.reminder.length>0">
			<p>重要提示：</p>
			<p v-for="item in orderinfo.reminder">
				<rich-text :nodes="item"></rich-text>
			</p>
		</view>
		<view class="wenxin" v-if="orderinfo.notCancelReason">
			<p>不可取消原因：</p>
			<p> {{orderinfo.notCancelReason}}</p>
		</view>
		<view class="yijianfan" @click="goyijian()">
			遇见问题？意见反馈>
		</view>
		<view class="btn">
			<view class="btncan" v-if="orderinfo.isOrderCancel" @click="cancelgua()">
				取消预约
			</view>
			<view class="btncon" v-if="orderinfo.toUserPage" @click="gomine()">
				个人中心
			</view>

			<view class="btncon" v-if="orderinfo.isPayOrder" @click="gopay()">
				去支付
			</view>
			<!-- <view class="btncan" v-if="orderinfo.orderState=='101'||orderinfo.orderState=='1'||orderinfo.orderState=='102'" @click="cancelgua()">
				取消预约
			</view>
			<view class="btncan" v-if="orderinfo.orderState=='301'||orderinfo.orderState=='3'||orderinfo.orderState=='4'||orderinfo.orderState=='401'" @click="gomine()">
				个人中心
			</view>
			<view class="btncon"  v-if="orderinfo.orderState=='301'||orderinfo.orderState=='3'||orderinfo.orderState=='4'||orderinfo.orderState=='401'||orderinfo.orderState=='1'" >
				再次预约
			</view>
			<view class="btncon"  v-if="orderinfo.orderState=='101'||orderinfo.orderState=='102'" @click="gopay()" >
				去支付
			</view> -->
		</view>

		<view class="btnzai" v-if="orderinfo.isOrderRebook" @click="aginyue()">
			再次预约
		</view>
		<u-modal :show="showcancel" cancelText="放弃" confirmText='确定' title="取消原因" :closeOnClickOverlay="true"
			:showCancelButton="true" @cancel="cancel()" @confirm="quxiao()">
			<view class="slot-content">

				<p style="margin-top: 10rpx;">请选择取消原因</p>
				<view style="margin-top: 10rpx;">
					<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>

				<u--textarea v-model="reason" placeholder="其他原因？补充说明" maxlength="100"></u--textarea>
				<view class="" style="margin-top: 10rpx;">
					<p>根据平台相关规定，为促进诚信就医。取消订单会扣除个人信誉积分，【普通专家-1分/次，紧俏专家-2分/次（停诊除外）】，多次取消可能导致信誉分过低影响您使用就医服务。确定要取消本次预约吗？</p>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import homeApi from '@/api/home'
	import urlApi from "@/setting.js"
	import homeApii from '@/api/homee'
	import homeApiii from '@/api/homeee'
	import orderdetailVue from './orderdetail.vue'
	import {
		reportCmPV
	} from '../../../api/cloudMonitorHelper.js';
	export default {
		data() {
			return {
				radiolist1: [],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '',
				reason: "",
				reasonall: "",
				content: "",
				showText: true,
				orderinfo: "",
				ghOrderNo: "",
				treatCertShowType: "",
				ma: "",
				token: "",
				longitude: "",
				latitude: "",
				showcancel: false,

				timeData: {},
				time: 100000,
				payWay: "",
				ptPayConfigId: ""
			}
		},

		onLoad(option) {
			
			this.getreason()


			this.ghOrderNo = option.ghOrderNo
			// this.ghOrderNo = "SPT1000001364624977"
			if (this.ghOrderNo) {
				let token = uni.getStorageSync("token")
				if (token) {
					this.token = token
					this.ordertail()
				} else {
					this.gettoken()
				}
				if (this.content.length > 47) {
					this.showText = false
				} else {
					this.showText = true
				}
			}


		},

		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			getreason() {
				homeApiii.getreason({}).then(res => {
					console.log(res)
					this.radiolist1 = res.data
				})
			},
			goyijian() {
				uni.navigateTo({
					url: "/pages/yijian/yijian"
				})
			},
			gojiuzhen() {
				uni.navigateTo({
					url: "/pages/jiuzhengonglue/jiuzhengonglue?content=" + this.orderinfo.medicalTreatGuide
				})
			},
			aginyue() {
				uni.navigateTo({
					url: "/pages/docinfo/docinfo?doctorId=" + this.orderinfo.doctorId
				})
			},
			gopay() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				homeApiii.getzhican({
					token: this.token,
					ghOrderNo: this.ghOrderNo,
					ptPayConfigId: this.ptPayConfigId,
					payWay: this.payWay
				}).then(res => {
					uni.hideLoading()
					if (res.code == 4000) {
						wx.requestPayment({
							"timeStamp": res.data.timeStamp,
							"nonceStr": res.data.nonceStr,
							"package": res.data.package,
							"signType": res.data.signType,
							"paySign": res.data.paySign,
							"success": function(re) {
								this.orderinfo.orderState = "1"
								this.orderinfo.isPayOrder = false
								this.orderinfo.toUserPage = true
								this.orderinfo.isOrderRebook = false
								this.$forceUpdate()


							},
							"fail": function(re) {
								uni.showToast({
									title: "取消支付",
									icon:"none"
								})
							},
							"complete": function(re) {}
						})
						// let trade_no = res.data.trade_no
						// my.tradePay({
						// 	// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
						// 	tradeNO: trade_no,
						// 	success: (res) => {
						// 		// this.getordertail()
						// 		// this.orderinfo.orderState="1"
						// 		// this.$forceUpdate()
						// 		console.log(res, "11231")
						// 		if (res.resultCode == "6001") {

						// 		}
						// 		if (res.resultCode == "9000") {
						// 			this.orderinfo.orderState = "1"
						// 			this.orderinfo.isPayOrder = false
						// 			this.orderinfo.toUserPage = true
						// 			this.orderinfo.isOrderRebook = false
						// 			this.$forceUpdate()
						// 		}

						// 	},
						// 	fail: (res) => {
						// 		uni.showToast({
						// 			title: "取消了"
						// 		})
						//  }
						// });
					} else {
						uni.showToast({
							title: res.msg,
							icon:"none"
						})
					}

				})
			},
			finishdao() {
				// this.orderinfo.orderState = "401"
				this.ordertail()
				this.$forceUpdate()
			},
			onChange(e) {
				this.timeData = e
			},
			getdao() {
				homeApiii.getdao({
					hospitalId: this.orderinfo.hospitalId,
					ghOrderNo: this.ghOrderNo,
					token: this.token
				}).then(res => {
					this.time = res.data.payPasstime * 1000
					console.log(this.time, "123")
					this.ptPayConfigId = res.data.ptPayConfigs[0]
					this.payWay = res.data.payWay
				})
			},
			gomine() {
				uni.switchTab({
					url: "/pages/mine/mine"
				})
			},
			quxiao() {
				if (this.radiovalue1 || this.reason) {
					this.reasonall = this.radiovalue1 + ":" + this.reason

					// 		my.requestSubscribeMessage({
					// 		  entityIds: [
					// 		    '19c7ba4b648e41af9827823b8797aba1',

					// 		  ],
					// 		  success: res => {
					// 		    console.log('接口调用成功的回调', res);
					// 			uni.showLoading({
					// 				title: '加载中',
					// 				mask: true
					// 			});
					homeApiii.cancelorder({
						ghOrderNo: this.orderinfo.ghOrderNo,
						cancelReson: this.reasonall,
						token: this.token
					}).then(res => {
						uni.hideLoading()
						if (res.code == 4000) {
							this.showcancel = false
							let that=this
							let tmplIds=["I0U-EdeGAqP8FDb85tgnyr28fSjGbL7rGnwbuUR0nAw"]
							wx.requestSubscribeMessage({
								tmplIds: tmplIds,
								success(a) {
								that.ordertail()
								},
								fail(a) {
									that.ordertail()
								}
							})

							uni.showToast({
								title: "取消成功",
								icon: "none"
							})

						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
							this.showcancel = false
							this.ordertail()



						}
					})
					// 		  },
					// 		  fail: err => {
					// 			  uni.showLoading({
					// 			  	title: '加载中',
					// 			  	mask: true
					// 			  });
					// 			  homeApiii.cancelorder({
					// 			  	ghOrderNo:this.orderinfo.ghOrderNo,
					// 			  	cancelReson:this.reasonall,
					// 			  	token:this.token
					// 			  }).then(res=>{
					// 			  	uni.hideLoading()
					// 			  	if(res.code==4000){
					// 			  		this.showcancel=false
					// 			  		this.ordertail()

					// 			  		uni.showToast({
					// 			  			title:"取消成功",
					// 			  			icon:"none"
					// 			  		})

					// 			  	}else{
					// 					uni.showToast({
					// 						title:res.msg,
					// 						icon:"none"
					// 					})
					// 					this.showcancel=false
					// 					this.ordertail()


					// 				}
					// 			  })
					// 		    console.log('接口调用失败的回调', err);
					// 		  }
					// 		});


				} else {
					uni.showToast({
						title: "请选择取消原因",
						icon:"none"
					})

				}


			},
			cancel() {
				this.showcancel = false
			},
			cancelgua() {
				this.reason = ""
				this.radiovalue1 = ""
				this.reasonall = ""
				this.showcancel = true

			},
			godingwei() {
				// 113.710018,34.753292
				// my.openLocation({
				// 	longitude: this.longitude,
				// 	latitude: this.latitude,
				// 	name: this.orderinfo.hospitalName,
				// 	address: this.orderinfo.hospitalAddress,
				// 	success: res => {
				// 		console.log(res);
				// 	},
				// 	fail: res => {
				// 		console.log(res);
				// 	},
				// });
			},
			gettoken() {
			uni.login({
				provider: 'weixin',
				success: (re) => {
					console.log(re)
					let code = res.code
					// this.getopenid()
					const authCode = res.authCode;
					homeApii.getopenid({
						code: code
					}).then(res => {
						console.log(res)
						if (res.code == 4000) {
							uni.setStorageSync("token", res.data.token)
							this.$store.state.doc.token = res.data.token
							this.token = res.data.token
							this.ordertail()
						}
					})
				},
			})
			},
			getquhao() {
				homeApiii.getdetailqu({
					ghOrderNo: this.ghOrderNo,
					treatCertShowType: this.treatCertShowType
				}).then(res => {
					this.ma = res.data

				})
			},
			getCaption(obj, state) {
				var index = obj.lastIndexOf("\-");
				if (state == 0) {
					obj = obj.substring(0, index);
				} else {
					obj = obj.substring(index + 1, obj.length);
				}
				return obj;
			},
			shangbao(val){
				let token=uni.getStorageSync("token")
				homeApii.updatedata({
					token:token,
					departmentName:val,
					scene:"0101011"
				}).then(res=>{
					console.log(res)
				})
			},
			ordertail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				homeApiii.getorderdetail({
					token: this.token,
					ghOrderNo: this.ghOrderNo
				}).then(res => {
					uni.hideLoading()
					if (res.code == 4000) {
						this.orderinfo = res.data
						this.shangbao(res.data.deptName)
						var indexx = this.orderinfo.hospitalAddressGeo.indexOf(",")
						var resolve = this.orderinfo.hospitalAddressGeo.substring(0, indexx);
						let index = this.orderinfo.hospitalAddressGeo.indexOf(",");
						let result = this.orderinfo.hospitalAddressGeo.substr(index + 1, this.orderinfo
							.hospitalAddressGeo.length);
						this.latitude = result
						this.longitude = resolve
						this.treatCertShowType = this.orderinfo.treatCertShowType
						if (this.treatCertShowType == true) {
							this.getquhao()
						}
						if (this.orderinfo.orderState == "101" || this.orderinfo.orderState == "102") {
							this.getdao()
						}
						// if (this.orderinfo.reminder.length > 100) {
						// 	this.showText = false
						// } else {
						// 	this.showText = true
						// }
					} else {
						// uni.showToast({
						// 	title: res.msg
						// })
						if (res.code == 4011) {
							this.gettoken()
						}
					}
				})
			},
			toggleDescription() {
				this.showText = !this.showText
				this.$forceUpdate();
			},
			godocinfo() {
				uni.navigateTo({
					url: "/pages/docinfo/docinfo?doctorId=" + this.orderinfo.doctorId
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.order {
		background-color: #F5F6F8;
		padding-bottom: 100rpx;
		overflow: hidden;
		padding-top: 180rpx;

		.slot-content {
			font-size: 26rpx;
			line-height: 40rpx;
			color: #606266;
			padding-bottom: 20rpx;
		}

		.yijianfan {
			width: 100%;
			font-size: 26rpx;
			line-height: 80rpx;
			color: #8BA9E2;
			text-align: center
		}

		.btnzai {
			width: 93%;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 15rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-color: #4581F6;
			color: #fff;
			text-align: center;

		}

		.wenxin {
			width: 93%;
			margin: 0 auto;
			margin-top: 20rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #666666;

			.full_text {
				display: flex;
				font-size: 28rpx;
				line-height: 40rpx;
				margin-left: 44%;
				color: #4581F6;
			}
		}

		.btn {
			width: 93%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			.btncan {
				width: 47%;
				height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				font-size: 28rpx;
				line-height: 80rpx;
				border: 1rpx solid #666;
				color: #666;
				background-color: #fff;
			}

			.btncon {
				width: 47%;
				height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				font-size: 28rpx;
				line-height: 80rpx;
				color: #fff;
				background-color: #417ef7;
			}
		}

		.orderstate {
			width: 93%;
			margin: 0 auto;
			border-radius: 15rpx;
			background-color: #fff;
			padding-top: 30rpx;
			padding-bottom: 40rpx;
			margin-top: 20rpx;

			.stateimg {
				width: 80rpx;
				height: 80rpx;
				margin: 20rpx auto;

				image {
					width: 100%;
					height: 100%;
				}

			}

			.stateimgg {
				width: 180rpx;
				height: 180rpx;
				margin: 20rpx auto;

				image {
					width: 100%;
					height: 100%;
				}

			}

			.stateimggg {
				width: 300rpx;
				height: 180rpx;
				margin: 20rpx auto;

				image {
					width: 100%;
					height: 100%;
				}

			}

			.miaoshu {
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
			}
		}

		.list {
			width: 93%;
			margin: 0 auto;
			// margin-top: 20rpx;
			border-radius: 15rpx;
			// padding-top: 10rpx;
			padding-bottom: 20rpx;
			overflow: hidden;

			.listmain {
				width: 100%;
				margin: 0 auto;
				border-radius: 15rpx;
				background-color: #fff;
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				margin-top: 20rpx;

				.listitem {
					width: 93%;
					margin: 0 auto;

					.jiuline {
						border-bottom: 1rpx solid #f7f7f7;
						font-size: 30rpx;
						padding-bottom: 20rpx;
						font-weight: bold;
						margin-bottom: 20rpx;
					}

					.itemtop {
						display: flex;
						justify-content: space-between;
						// border-bottom: 1rpx solid #f7f7f7;
						padding-bottom: 20rpx;

						.itemtopl {
							font-size: 26rpx;
							color: #333;
							line-height: 40rpx;

						}

						.itemtopr {
							width: 100rpx;
							height: 40rpx;
							border-radius: 5rpx;
							text-align: center;
							font-size: 22rpx;
							line-height: 40rpx;
							background-color: #feece8;
							color: red;
						}
					}

					.address {
						width: 100%;
						background-color: #f2f6ff;
						padding-top: 20rpx;
						padding-bottom: 20rpx;
						border-radius: 15rpx;

						.addressmain {
							width: 90%;
							margin: 0 auto;
							display: flex;
							justify-content: space-between;

							.addl {
								width: 80%;

								.hosname {
									font-size: 24rpx;
									font-weight: bold;
									line-height: 40rpx;
								}

								.hosad {
									font-size: 24rpx;
									line-height: 40rpx;
								}
							}

							.addr {
								font-size: 24rpx;
								line-height: 40rpx;
							}
						}

					}

					.full_text {
						display: flex;
						font-size: 28rpx;
						line-height: 40rpx;
						margin-left: 44%;
						color: #333;
					}

					.chakan {
						width: 200rpx;
						height: 40rpx;
						font-size: 20rpx;
						line-height: 40rpx;
						text-align: center;
						border: 1rpx solid #4581F6;
						color: #4581F6;
						border-radius: 25rpx;
						margin-left: 450rpx;
						margin-top: 30rpx;
					}

					.docinfo {
						width: 100%;
						display: flex;
						padding-bottom: 20rpx;
						margin-top: 20rpx;

						.docl {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.docr {
							margin-left: 20rpx;
							overflow: hidden;
							width: 550rpx;

							.docname {
								font-size: 28rpx;
								font-weight: bold;
								color: #333;

								span {
									font-size: 24rpx;
									font-weight: normal;
									color: #666666;
									margin-left: 10rpx;
								}
							}

							.hosname {
								font-size: 24rpx;
								font-weight: normal;
								color: #666666;
								margin-top: 10rpx;
							}
						}
					}

					.duxin {
						width: 100%;
						display: flex;
						font-size: 26rpx;
						line-height: 40rpx;
						color: #333;
					}

					.itemcon {
						width: 100%;
						display: flex;
						justify-content: space-between;
						font-size: 26rpx;
						line-height: 65rpx;

						.itemconl {
							color: #666;
						}

						.itemconr {
							width: 70%;
							color: #333;
							text-align: right;
							font-weight: bold;
						}

						.itemconrr {
							width: 100rpx;
							height: 40rpx;
							line-height: 40rpx;
							color: #666;
							border: 1rpx solid #666;
							border-radius: 20rpx;
							text-align: center;
							font-size: 20rpx;
						}
					}

				}
			}
		}



	}
</style>
